<template>
	<view class="content">
		<!-- <view class="steps-wrap">
			<view class="steps-list">
				<view class="steps-item active">
					<text>1</text>
				</view>
				<view class="steps-item active">
					<text>2</text>
				</view>
			</view>
		</view> -->
		<view class="titlemsg">真实的个人信息才能找到对的人哦</view>
		<view class="upload-wrap">
			<view class="avatar-wrap">
				<image class="avatar" :src="sexavatar"></image>
				
				<view class="upavatar" @click="upload('album')" v-if='progress==0'>
					<image class="up-icon" src="../../static/img/register/pz.png" mode="aspectFill" ></image>
				</view>
				<!-- <image class="avatar" :src="avatar" mode="aspectFill" ></image> -->
			</view>
			<!-- <view class="btn-wrap">
				<button class="album" type="primary" @click="upload('album')">本地上传</button>
				<button class="camera" type="default" @click="upload('camera')">拍照上传</button>
			</view> -->
		</view>
		
		<view class="btn-wrap">
			<button type="primary" @click="upavatar">确定</button>
		</view>
		
	</view>
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				form: {
					file: ''
				},
				sexavatar: '/static/img/register/male-select.png',
				qiniuToken: '',
				domain: '',
				progress: 0,
				myInfo: {},
			}
		},
		onLoad(options) {
			
			try {
				const myInfo = uni.getStorageSync('myInfo');
				this.myInfo = myInfo
			} catch (e) {
				console.log(e);
			}
			if(options.sex==2){
				this.sexavatar='/static/img/register/female-select.png'
			}
		},
		onReady() {
			this.getQiniuToken();
		},
		onNavigationBarButtonTap(e) {
			
		},
		methods: {
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},

			upload: function (type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: res => {
						let tempPaths = res.tempFilePaths[0].split('/');
						uni.showLoading({
							title: this.progress + '%'
						});
						qiniuUploader.upload(res.tempFilePaths[0], qiniu => {
							uni.hideLoading();
							this.sexavatar = res.tempFilePaths[0];
							this.form.file = qiniu.key;
						}, (err) => {
							console.log('err: ' + JSON.stringify(err));
						}, {
							region: 'SCN',
							domain: this.domain,
							key: tempPaths[tempPaths.length - 1],
							uptoken: this.qiniuToken,
						}, (res) => {
							this.progress = res.progress;
						}, () => {
							// 取消上传
						}, () => {
							// `before` 上传前执行的操作
						}, () => {
							// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
						});
					}
				});
			},

			previewImage: function () {
				if (this.avatar != '') {
					uni.previewImage({
						current: 0,
						urls: [this.avatar],
						indicator: 'none',
						loop: false,
					});
				}
			},
		    
			// 上传头像
			upavatar(){
				if (this.form.file == '') {
					uni.showToast({
						title: '请上传头像',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '',
				});
				this.$api.api.ajaxData({
					method: 'V1.UserUpload',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					type: '3',
					file: this.form.file
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						uni.switchTab({
							url: '../home/home'
						})
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	
	.steps-wrap {
		padding: 80rpx 200rpx;
		.steps-list {
			display: flex;
			justify-content: center;
			align-items: center;
			.steps-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				background: #cbcbcb;
				border-radius: 60rpx;
				position: relative;
				margin: 0 78rpx;
				&.active {
					background: #FF76A8;
					&::before {
						background: #FF76A8;
					}
					&::after {
						background: #FF76A8;
					}
				}
				text {
					font-size: 20rpx;
					color: #fff;
				}
				&::before {
					content: '';
					width: 80rpx;
					height: 20rpx;
					background: #cbcbcb;
					position: absolute;
					left: -78rpx;
					top: 50%;
					margin-top: -10rpx;
				}
				&::after {
					content: '';
					width: 80rpx;
					height: 20rpx;
					background: #cbcbcb;
					position: absolute;
					right: -78rpx;
					top: 50%;
					margin-top: -10rpx;
				}
				&:first-child {
					margin-left: 0;
					&::before {
						display: none;
					}
				}
				&:last-child {
					margin-right: 0;
					&::after {
						display: none;
					}
				}
			}
		}
	}
	
	.upload-wrap {
		background-color: #fff;
		padding-top: 50rpx;
	}

	.avatar-wrap {
		display: flex;
		justify-content: center;
		align-items: center;

		.avatar {
			width: 480rpx;
			height: 480rpx;
			border-radius: 10rpx;
			background-color: $image-bg-color;
		}
	}

	.btn-wrap {
		padding: 50rpx 100rpx;
		position: absolute;
		bottom: 140rpx;
		width: 558rpx;
		button {
			border-radius: 100rpx;
			background-image: none;
			background-color: #fe2e61;
		}
	}
	
	.pass-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
		text {
			color: $main-color;
			font-size: 30rpx;
		}
	}

    .titlemsg{
    	margin:38rpx 0 100rpx 70rpx;
    	font-size: 30rpx;
    	line-height: 30rpx;
    	color: #979797;
    	font-family:"SourceHanSansCN" !important;
    }
    
    // 上传头像
    .upload-wrap {
    	background-color: #fff;
    	padding: 50rpx 0;
    }
    
    .avatar-wrap {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	.avatar {
    		background-image: url('@/static/img/register/male-select.png');
    		background-size: cover;
    		width: 170rpx;
    		height: 170rpx;
    		border-radius: 50%;
    	}
    	// 上传头像阴影
    	.upavatar{
    		background-color: rgba($color: #000000, $alpha: .4);
    		position: absolute;
			left: 50%;
    		width: 170rpx;
    		height: 170rpx;
    		border-radius: 50%;
    		z-index: 33;
			margin-left: -85rpx;
    		.up-icon{
    			width: 66rpx;
    			height: 55rpx;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%,-50%);
    		}
    	}
    }
    
</style>
